const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
// const ManifestPlugin = require('webpack-manifest-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const localIp = require('./bin/localIp');

const IS_DEV = process.env.NODE_ENV === 'development';
const PORT = 8080;

const plugins = [
    new CleanWebpackPlugin({
        verbose: IS_DEV,
        cleanOnceBeforeBuildPatterns: ['**/*', '!dll', '!dll/**/*']
    }),
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, './src/index.ejs'),
        minify: false,
        chunks: 'all'
    }),
    new ModuleFederationPlugin({
        name: 'main',
        remotes: {
            app1: `app1@//${localIp}:8081/app1/entry.js`,
            app2: `app2@//${localIp}:8082/app2/entry.js`,
        },
        shared: {
            react: { singleton: true },
            'react-dom': { singleton: true },
            'react-router': { singleton: true },
            'react-router-dom': { singleton: true },
        },
    }),
    // new ManifestPlugin(),
    // new webpack.DllReferencePlugin({
    //     manifest: require('./dist/dll/vendor-manifest.json'),
    // }),
    // new webpack.DllReferencePlugin({
    //     manifest: require('./dist/dll/echarts-manifest.json'),
    // }),
];

if (IS_DEV) {
    // plugins.push(new webpack.NamedModulesPlugin());
} else {
    plugins.push(new BundleAnalyzerPlugin());
    // plugins.push(new webpack.HashedModuleIdsPlugin());
}

module.exports = {
    entry: {
        app: ['./src/index']
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: `[name].[${IS_DEV ? 'hash:10' : 'contenthash:10'}].js`,
        publicPath: `//${localIp}:${PORT}/`,
    },
    resolve: {
        extensions: ['.mjs', '.js', '.jsx', '.json'],
        alias: {
            '@': path.resolve(__dirname, './src'),
            app: path.resolve(__dirname, './src/App.jsx'),
        }
    },
    mode: 'development',
    devtool: 'source-map',
    mode: IS_DEV ? 'development' : 'production',
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
            },
        }, {
            test: /\.(less|css)$/,
            use: ['style-loader', 'css-loader', 'less-loader', {
                loader: 'style-resources-loader',
                options: {
                    patterns: [
                        './src/assets/styles/variable.less',
                    ],
                },
            }],
        }],
    },
    plugins,
    devServer: {
        static: path.resolve(__dirname, 'dist'),
        host: localIp,
        port: PORT,
        hot: true,
        historyApiFallback: true,
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    }
};
